<template>
  <ul class="list" >
      <li class="item" v-for="(item, key) of cities" :key="key" 
      @click="handleLetter"
      @touchstart.prevent="touchstartHandle"
      @touchmove="touchmoveHandle"
      @touchend="touchendHandle"
      :ref="key"
      >{{key}}</li>
  </ul>
</template>

<script>
import { setTimeout } from 'timers';
import { clearTimeout } from 'timers';
export default {
  name: "CityAlphabet",
  props:{
      cities:Object,
  },
  data(){
        return{
            touchStatus:false,
            startY:'',
            timer:null,
            
        }
  },
  updated(){
       this.startY=this.$refs['A'][0].offsetTop; 
  },
  computed:{
       letters(){
           const letters=[];
           for(let i in this.cities){
             letters.push(i);
           }
           return letters
       }
  },
  methods:{
      handleLetter(e){
          this.$emit('change',e.target.innerText); 
      },
     touchstartHandle(){
         this.touchStatus=true
     },
     touchmoveHandle(e){
        if(this.touchStatus){
           if(this.timer) {
               clearTimeout(this.timer);
           }
           this.timer=setTimeout(()=>{
             const touchY=e.touches[0].clientY-79;
          const index=Math.floor((touchY-this.startY)/20);
          if(index>=0&&index<this.letters.length){
              this.$emit('change',this.letters[index]);
          }  
           },16)    
        }
     },
     touchendHandle(){
         this.touchStatus=false
     }
  }
};
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/varibles.styl';
.list
  display :flex
  flex-direction :column
  justify-content :center
  position :absolute
  top:1.58rem
  right :0
  bottom:0
  width :.4rem
  .item 
     line-height :.44rem
     text-align :center
     color :$bgColor
</style>

